<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/style.css" />
		<style>
			textarea,input{border: none;font-size: 14px;color: #333333;padding: 0px;}
			textarea{height: 90px;}
			span{color: #323232!important;}
			.mui-preview-header,
			.mui-preview-footer {
				position: absolute;
				width: 100%;
				left: 0;
				z-index: 10;
			}
			.mui-preview-header {
				height: 44px;
				top: 0;
			}
			.mui-preview-footer {
				height: 50px;
				bottom: 0px;
			}
			.mui-preview-header .mui-preview-indicator {
				display: block;
				line-height: 25px;
				color: #fff;
				text-align: center;
				margin: 15px auto 4;
				width: 70px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 12px;
				font-size: 16px;
			}
			.mui-preview-image {
				display: none;
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			.mui-preview-image.mui-preview-in {
				-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
			}
			.mui-preview-image.mui-preview-out {
				background: none;
				-webkit-animation-name: fadeOut;
				animation-name: fadeOut;
			}
			.mui-preview-image.mui-preview-out .mui-preview-header,
			.mui-preview-image.mui-preview-out .mui-preview-footer {
				display: none;
			}
			.mui-zoom-scroller {
				position: absolute;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				-webkit-backface-visibility: hidden;
			}
			.mui-zoom {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			.mui-slider .mui-slider-group .mui-slider-item img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
				display: inline-table;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
				display: table-cell;
				vertical-align: middle;
			}
			.mui-preview-loading {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			.mui-preview-loading.mui-active {
				display: block;
			}
			.mui-preview-loading .mui-spinner-white {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -25px;
				height: 50px;
				width: 50px;
			}
			.mui-preview-image img.mui-transitioning {
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
				transition: transform 0.5s ease, opacity 0.5s ease;
			}
			@-webkit-keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@-webkit-keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			@keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			p img {
				max-width: 100%;
				height: auto;
			}
			.pic-xiangqing{width: 100%;overflow: hidden;}
			.pic-xiangqing div{width: 33.3%;float: left;}
			.pic-xiangqing div img{
				display: block;width: 90%;margin: auto;height: 60px;
			}
			.bohui_because{display: none;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav ding-bar">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">维修完成</h1>
		</header>
		<div class="mui-content">
		   <div class="mokuai">
		   	   <div>
			   	   	<span>电梯编号：</span>
			   	   	<input  placeholder="ASDFG123456" id="bianhao"readonly="readonly"/>
		   	   </div>
		   </div>
		   <div class="mokuai">
		   	   <div>
			   	   	<span>故障原因：</span>
			   	   	<textarea placeholder="请填写故障原因" readonly="readonly" id="beause"></textarea>
		   	   </div>
		   </div>
		   <div class="mokuai bohui_because">
		   	   <div>
			   	   	<span>驳回原因：</span>
			   	   	<textarea readonly="readonly" id="bohui_because"></textarea>
		   	   </div>
		   </div>
		    <div class="mokuai">
		   	   <div>
			   	   	<span>图片详情：</span>
			   	   	<div class="mui-content-padded pic-xiangqing" style="margin: 0px;">			
					</div>
		   	   </div>
		   </div>
		   <div class="mokuai">
		   	   <div>
			   	   	<span>修理项目明细：</span>
			   	   	<textarea placeholder="请填写修理项目明细" id="delcontent"></textarea>
		   	   </div>
		   </div>
		   <div class="mokuai">
		   	   <div>
			   	   	<span>需要更换的配件：</span>
			   	   	<textarea placeholder="请填写需要更换的配件" id="content"></textarea>
		   	   </div>
		   </div>
		   <div class="mokuai">
		   	   <div>
			   	   	<span>配件报价：</span>
			   	   	<input  placeholder="请填写配件报价" id="price"/>
		   	   </div>
		   </div>
		   <button class="w-finish">维修完成</button>
		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/jquery-1.8.0.min.js" ></script>
		<script type="text/javascript" src="../js/head_public.js" ></script>
		<script type="text/javascript" src="../js/common.js" ></script>
		<script src="../js/mui.zoom.js"></script>
	    <script src="../js/mui.previewimage.js"></script>
		<script type="text/javascript" src="../js/session.js" ></script>
		<script>
			mui.previewImage();
		</script>
		<script type="text/javascript">
			mui.init()
			var userid=getCookie("userid");
			var work=getCookie("work");
			var id=getQueryString("id")
			var work_id=getCookie("workid");
			if(userid==""||userid==null){
				alert("你还没有登录，请先登录！")
				location.href="../public/login.html"
			}
			var param={};
			param.member_id=userid;
			param.id=id;
			$.post(net+"/public/index.php?s=api/elevator/serviceBug_info",param,function(res){
				if(res.code=="200"){
					$("#bianhao").val(res.result.elevator_code);
					$("#beause").val(res.result.reause);
					var imgs=[];
			        if(res.result.pic!=null&&res.result.pic!=""){
			        	imgs=res.result.pic.split(',')
			        }
			        if(res.result.check="-1"&&(res.result.check_reason!=""&&res.result.check_reason!=null)){
			        	$("#bohui_because").val(res.result.check_reason);
			        	$(".bohui_because").show();
			        }
			        var str_img="";
			        $.each(imgs, function(index,val) {
			        	str_img+='<div><img src="'+net+val+'" data-preview-src="" data-preview-group="1" /></div>'	
			        });
			        
			        $(".pic-xiangqing").html(str_img)
			        $("#delcontent").val(res.result.delcontent)
			        $("#content").val(res.result.content)
			        $("#price").val(res.result.price)
			        mui(".mui-content").on("tap",".w-finish",function(){
			        	var delcontent=$("#delcontent").val();
			        	var content=$("#content").val();
			        	var price=$("#price").val();
			        	if(delcontent==""||delcontent==null){
			        		alert("请填写修理项目明细")
			        		return false;
			        	}else if(content==""||content==null){
			        		alert("请填写需要更换的配件")
			        		return false;
			        	}else if(price==""||price==null){
			        		alert("请填写配件报价")
			        		return false;
			        	}
			        	var data={};
			        	data.delcontent=delcontent;
			        	data.content=content;
			        	data.price=price;
			        	data.member_id=userid;
			        	data.id=id;
			        	$.post(net+"/public/index.php?s=api/elevator/serviceBug_action",data,function(res){
			        		if(res.code=="200"){
			        			alert("提交成功");
			        			mui.back();
//			        			mui.openWindow({url:"yiwancheng.html"});
			        		}
			        	})
			        })
				}
			})
		</script>
	</body>

</html>